import SliderCaptcha, { ActionType } from "rc-slider-captcha";
import { useRef } from "react";

interface VerifyProps {
  onVerify: () => Promise<any>;
}

export const Verify = ({ onVerify }: VerifyProps) => {
  const actionRef = useRef<ActionType>();
  return (
    <SliderCaptcha
      mode="slider"
      tipText={{
        default: "请按住滑块，拖动到最右边",
        moving: "请按住滑块，拖动到最右边",
        error: "验证失败，请重新操作",
        success: "验证成功",
      }}
      errorHoldDuration={1000}
      onVerify={(data) => {
        console.log(data);
        // 默认背景图宽度 320 减去默认拼图宽度 60 所以滑轨宽度是 260
        if (data.x === 260) {
          // 成功后的处理
          return onVerify();
        }
        // 失败后的处理
        actionRef?.current?.refresh();
        return Promise.reject();
      }}
      actionRef={actionRef}
    />
  );
};
